The NoFloat Container Type
Description
A look at how NoFloat containers can be used in designing an application's CSS.
By default UX components have a certain amount of padding that is displayed between controls and their containers. This guide illustrates how this padding works in a component with a standard 'None' type container. It then shows how you can eliminate any default padding around controls using the 'NoFloat' container type and within a container using the 'Prevent container float' property. The NoFloat container is useful if you want to have complete control over the CSS spacing of the controls inside a container. This container type is also described in this video.
Building Two Containers with No Type.
In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. For reference give the textbox the name and label 'firstname'.
Add three more textbox controls to the component with the names and labels 'lastname', 'city', and 'state'.
In the controls tree click the toggle break icon to turn off the toggle break after the first and third control.
Highlight all of the textbox controls in the controls tree. Open the Containers menu and click on the [Container] option.
From the Container Type list select None and click OK.
Highlight the opening container tag in the controls tree. In the property list on the right click the [...] button next to the 'Container style' property in the 'Container Begin Properties' section.
Scroll down the Style Editor properties to the border section and click the dropdown next to the 'Style' setting. Select 'solid'.
Set the 'Width' setting to 1px.
Click the [...] button next to the 'Color' setting and select a color. Click OK to close the style editor.
Highlight all of the controls in the controls tree, including the container. Right click and click the 'Copy selected controls to clipboard' option.
Click the 'Copy Controls to Clipboard' button.
Go to the end of the controls tree and right click. Select the 'Paste controls from clipboard' option.
Click the 'Paste from Clipboard' button and click OK. A message will appear stating that the names of controls will need to be changed, click OK again.
Highlight the opening tag of the second container.
In the properties list on the right click the [...] button next to the 'Container style' property.
In the 'Border' section click the [...] button next to the 'Color' property and select a new border color. Close the style editor.
Run the component in Live Preview. The Containers should look like this:
In this example there are 4 pixels of default padding around each control and on the inside of the container that contains the controls. This means there are 8 pixels of padding between any two controls or between any given control and the border. The default 4 pixels of padding is set inside the A5CWLayout class padding property in the CSS/SVG section of the UX Properties page.
When you place the same controls inside a 'NoFloat' container, any spacing set around controls will be eliminated. The 'NoFloat' container will also ignore any toggle break information that was added to or removed from the controls. The spacing set on the inside of the 'NoFloat' container will not automatically be eliminated unless the 'Prevent container float' checkbox is checked. This property can be checked on the UX Controls page on the 'NoFloat' container's opening tag. If no width is set for the NoFloat container, then preventing 'container float' will result in the NoFloat container taking up the width of the screen.
CSS and NoFloat Containers
Return to the Design tab. Highlight the opening tag of the second container. In the properties list on the right click the dropdown next to the 'Sub-type' property in the 'Container Begin Properties section. Select the 'NoFloat' option.
Open the component in Live Preview.
The spacing between the controls themselves has been eliminated. As the toggle break information is also removed the controls stack vertically. The only padding in the NoFloat container is the 4 pixels along the inside of the container itself.Open the UX Properties page and scroll down to the CSS/SVG section. The A5CWLayout class padding property should be set to 4px.
Open the UX Controls page and highlight the opening 'NoFloat' container tag. In the properties list on the right check the 'Prevent container float' checkbox in the 'Container Begin Properties' section.
Run the component again in Live Preview.
There is no padding between the controls in the NoFloat container and the container itself.
See Also